<template>
  <div id="app">
    <div id="TabControl">
      <!-- 选项卡 -->
      <el-scrollbar
        style="height:55px;width: 100%;overflow-y:hidden;overflow-x:hidden;"
        class="tree_scroll"
        @mousewheel.native="slide"
        ref="roll"
      >
        <!--@mousewheel.native="slide" ref="roll"滚动事件-->
        <div
          v-for="(item,index) in module"
          :key="index"
          class="topLeft"
          :class="[$route.path == item.path?'styles' : '']"
        >
          <!-- @contextmenu.prevent="show(index,$event)右键事件 -->
          <router-link :to="item.path">
            <span @contextmenu.prevent="show(index,item,$event)">{{$t(item.title)}}</span>
          </router-link>
          <i class="el-icon-error" @click="deleft(index)"></i>
        </div>
      </el-scrollbar>
    </div>
    <!-- 弹出框 -->
    <ul
      class="contextmenu"
      :style="'left:' + this.lefts + 'px;top:' + this.tops + 'px;'"
      v-if="bool"
    >
      <li @click="refresh(item)">刷新</li>
      <li @click.prevent="deletes()">关闭</li>
      <li @click.prevent="other()">关闭其它</li>
      <li @click.prevent="therefore()">关闭所有</li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["module"],
  data() {
    return {
      inputVisible: false,
      lefts: "",
      tops: "",
      bool: false, //bool是否关闭打开
      rightHand: "",
      item: ""
    };
  },
  methods: {
    //刷新
    refresh(item) {
      this.$router.replace({
        path: "/Blank",
        query: {
          list: item.path
        }
      }); //跳转到空白页面
      // this.bool=false
    },
    deleft(index) {
      this.rightHand = index;
      this.deletes();
    },
    //右键弹出框
    show(index, item, e) {
      this.bool = true; //bool是否关闭打开
      // 获取右键事件的XY轴
      this.lefts = e.screenX;
      this.tops = e.pageY;
      this.rightHand = index;
      this.item = item;
    },
    deletes() {
      // 关闭单个标签
      let index = this.rightHand;
      let deletes = this.module.splice(index, 1)[0]; //删除当前标签
      let item = this.module[index]
        ? this.module[index]
        : this.module[index - 1];
      if (item) {
        deletes.path === this.$route.fullPath && this.$router.push(item.path);
      } else {
        setTimeout(() => {
          this.$router.push({ title: "首页", path: "/Home/Directory" });
        }, 50);
      }
      this.bool = false;
    },
    // 关闭所有标签
    therefore() {
      this.module.splice(0, this.module.length); //关闭所以就跳到首页
      this.$router.push({ title: "首页", path: "/Home/Directory" });
      this.module.push({ title: "首页", path: "/Home/Directory" });
      this.bool = false;
    },
    //关闭其他
    other() {
      // let that=this
      this.module.splice(0, this.module.length, this.module[this.rightHand]); //关闭其它就跳到路由
      this.rightHand = 0;

      if (this.module[0].path != this.$route.path) {
        //判断标签是否相同是就为跳出去
        this.$router.push(this.module[0]);
      }
      this.bool = false;
    },
    //滚动
    slide(e) {
      e || window.event;
      if (e.wheelDelta > 0) {
        this.$refs.roll.wrap.scrollLeft = this.$refs.roll.wrap.scrollLeft + 30; //向左滚动
      }
      if (e.wheelDelta < 0) {
        this.$refs.roll.wrap.scrollLeft = this.$refs.roll.wrap.scrollLeft - 30; //向右滚动
      }
    },
    //关闭状态
    conceal() {
      this.bool = false;
    }
  },
  // 挂载后
  mounted() {
    document.addEventListener("click", this.conceal); //调用关闭状态
  }
};
</script>
<style>
a {
  text-decoration: none;
  color: #606266;
}
#apps {
  height: 35px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
}
#TabControl {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
#TabControl .topLeft {
  display: inline-block;
  position: relative;
  cursor: pointer;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: rgba(255, 255, 255, 0.8);
  padding: 0 8px;
  font-size: 12px;
  margin-left: 15px;
  border-radius: 3px;
  margin-top: 4px;
}
.el-scrollbar__wrap/deep/.el-scrollbar__view{
  padding-bottom: 4px;
}
#TabControl i {
  margin-left: 10px;
}
/* 弹出框*/
.contextmenu {
  position: absolute;
  margin: 0;
  background: #fff;
  z-index: 2;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}
.styles {
  background: #409eff !important;
  color: #ffff !important;
}
/* 滚动条 */
.el-scrollbar/deep/.el-scrollbar__wrap {
  overflow: auto;
  overflow-y: hidden;
  overflow-x: hidden;
}
.el-scrollbar/deep/.el-scrollbar__viev {
  overflow: auto;
  overflow-y: hidden;
  overflow-x: hidden;
}
.el-scrollbar/deep/.el-scrollbar__thumb {
  overflow: auto;
  overflow-y: hidden;
  overflow-x: hidden;
}
.el-scrollbar/deep/.el-scrollbar__bar.is-horizontal {
  width: 0 !important;
}
</style>
